<template>
  <div>
    <Header title="XXX系统"></Header>
    <div class="content">
      <div class="left">
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
          default-active="2" :router="true" text-color="#fff" @select="routeSelect">
          <el-sub-menu v-for="menu in menus" v-key="menu.index" :index="menu.url">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>{{ menu.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-for="menu2 in menu.children" v-key="menu2.index" :index="menu2.url">{{ menu2.name }}</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </div>
      <div class="right"><router-view></router-view></div>
    </div>


  </div>
</template>

<script>
import Header from '../components/Header.vue'
export default {
  name: 'index',
  components: {
    Header,
    // ButtonPage
  },
  data() {
    return {
      menus:[
        {
          index:'1',
          name:'系统设置',
          children:[
            {
              index:'1-1',
              name:'用户管理',
              url:'/index/userList'
            }
          ]
        },
        {
          index:'2',
          name:'ElementUI 示例',
          children:[
            {
              index:'2-1',
              name:'按钮',
              url:'/index/button'
            },
            {
              index:'2-2',
              name:'表单',
              url:'/index/form'
            },
            {
              index:'2-3',
              name:'列表',
              url:'/index/table'
            }
          ]
        },
        {
          index:'3',
          name:'智慧垃圾站',
          children:[
            {
              index:'3-1',
              name:'地图展示',
              url:'/index/button'
            },
            {
              index:'3-2',
              name:'垃圾站管理',
              url:'/index/form'
            }
          ]
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    routeSelect(e){
      console.log(e)
    }
  },
  mounted() {
    // let id = this.$route.params.id
    // console.log(id)
    console.log(this.$route.query)
  }
}
</script>
<style scoped>
.content{
}
.left {
  width: 200px;
  background-color: #545c64;
  position: fixed;
  left: 0;
  top: 100px;
  bottom: 0;
}

.right {
  margin-left: 216px;
  margin-top: 16px;
}
</style>
